<template>
    <el-button @click="exportToPDF">导出为PDF</el-button>
    <el-card class="outerBox">
        <el-container class="content-to-export" direction="vertical">
            <el-header>
                <h1>《数据结构》课程目标达成度评价</h1>
            </el-header>
            <el-main>
                <el-card class="box-card">
                    <div slot="header">
                        <span>一、课程基本信息</span>
                    </div>
                    <div class="table-container">
                        <!-- 左侧表格 -->
                        <el-table :data="courseBasicInfo.slice(0, 4)" style="width: 50%; float: left;" border>
                            <el-table-column width="180" prop="item">
                            </el-table-column>
                            <el-table-column prop="content">
                            </el-table-column>
                        </el-table>

                        <!-- 右侧表格 -->
                        <el-table :data="courseBasicInfo.slice(4, 10)" style="width: 50%; float: left;" border>
                            <el-table-column width="180" prop="item">
                            </el-table-column>
                            <el-table-column prop="content">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>

                <el-card class="box-card">
                    <div slot="header">
                        <span>二、该课程各个课程目标及权重值的确定</span>
                    </div>
                    <div>
                        根据软件工程专业认证标准要求，该课程的课程目标如下：
                    </div>
                    <ol>
                        <li>
                            课程目标1：知识教学目标 — 认识计算机应用中数据对象的特性，数据结构及其分类；具有各种数据的逻辑结构、存储结构、相应算法及其之间关系的相关知识。
                        </li>
                        <li>
                            课程目标2：基础能力培养目标 — 能应用数据结构的基础理论知识，具备各种数据结构及其算法的理论知识与设计技能，能设计各种基本数据结构和实现方法，并用于编制高效可靠的程序。
                        </li>
                        <li>
                            课程目标3：综合应用能力培养 — 能针对实际应用问题进行分析，合理地选择相应的数据结构，并进行算法设计与实现。
                        </li>
                    </ol>
                    <el-table :data="evaluationMatrix" border style="width: 100%">
                        <el-table-column :cell-class-name="getCellClassName" width="120px">
                            <template #header>
                                <div class="diagonal-split-header">
                                    <div class="text-part" style="bottom: 37px; right: 0;">毕业要求</div>
                                    <div class="text-part" style="top: 37px; left: 0;">课程目标</div>
                                    <div class="diagonal-line"></div>
                                </div>
                            </template>
                            <template #default="scope">
                                {{ scope.row.criteria }}
                            </template>
                        </el-table-column>
                        <el-table-column label="工程知识">
                            <el-table-column prop="ek1" label="1-1" width="60px"></el-table-column>
                            <el-table-column prop="ek2" label="1-2" width="60px"></el-table-column>
                            <el-table-column prop="ek3" label="1-3" width="60px"></el-table-column>
                            <el-table-column prop="ek4" label="1-4" width="60px"></el-table-column>
                        </el-table-column>
                        <el-table-column label="问题分析">
                            <el-table-column prop="pa1" label="2-1" width="60px"></el-table-column>
                            <el-table-column prop="pa2" label="2-2" width="60px"></el-table-column>
                            <el-table-column prop="pa3" label="2-3" width="60px"></el-table-column>
                        </el-table-column>
                        <el-table-column label="设计/开发解决方案">
                            <el-table-column prop="ds1" label="3-1" width="60px"></el-table-column>
                            <el-table-column prop="ds2" label="3-2" width="60px"></el-table-column>
                            <el-table-column prop="ds3" label="3-3" width="60px"></el-table-column>
                            <el-table-column prop="ds4" label="3-4" width="60px"></el-table-column>
                        </el-table-column>
                    </el-table>
                </el-card>
                <el-card class="box-card">
                    <div slot="header">
                        <span>三、课程目标达成度定量分析</span>
                    </div>
                    <div>
                        <p>该课程总成绩100分，由过程性考核和结果性考核两部分组成。过程性考核占总成绩比例40%，结果性考核占总评成绩的比例为60%，具体见下表考核成绩评定办法。</p>
                        <el-table :data="quantitativeAnalysisData" border style="width: 100%" :span-method="spanMethod">
                            <el-table-column prop="courseObjective" label="课程目标" width="120"></el-table-column>
                            <el-table-column prop="supportLink" label="支撑环节" width="240"></el-table-column>
                            <el-table-column prop="weight" label="权重系数" width="120"></el-table-column>
                        </el-table>
                    </div>
                    <p>该课程2022级2班学生成绩具体计算详见2202班《数据结构》课程达成度分析成绩成绩表.xls附件文件，主要是学生成绩表。各教学环节达成度计算如下：</p>
                    <div slot="header">
                        <span>支撑环节1--课堂表现</span>
                    </div>
                    <el-table :data="classPerformanceData" style="width: 100%" border>
                        <el-table-column prop="courseObjective" label="课程目标" width="120px">
                        </el-table-column>
                        <el-table-column prop="supportLink" label="课堂表现">
                        </el-table-column>
                        <el-table-column prop="totalValue" label="总分值" width="120px">
                        </el-table-column>
                        <el-table-column prop="averageScore" label="学生平均分">
                        </el-table-column>
                        <el-table-column prop="completion" label="达成度" width="120px">
                        </el-table-column>
                    </el-table>
                    <div>
                        说明：课堂表现占总成绩的10%，主要是课堂提问。
                    </div>
                    <div slot="header">
                        <span>二、支撑环节2--课程作业</span>
                    </div>
                    <el-table :data="homeworkPerformanceData" border style="width: 100%">
                        <el-table-column prop="courseObjective" label="课程目标" width="120px">
                        </el-table-column>
                        <el-table-column prop="supportLink" label="课程作业">
                        </el-table-column>
                        <el-table-column prop="totalValue" label="总分值" width="120px">
                        </el-table-column>
                        <el-table-column prop="averageScore" label="学生平均分">
                        </el-table-column>
                        <el-table-column prop="completion" label="达成度" width="120px">
                        </el-table-column>
                    </el-table>
                    <div>
                        说明：课程作业占总成绩的30%，包含4个作业。作业1和2为线性表作业，含顺序存储与链式存储，对应课程目标1；作业3为树作业，对应课程目标2；作业4为图作业，对应课程目标3。
                    </div>
                    <div slot="header">
                        <span>三、支撑环节3--期末考试</span>
                    </div>
                    <el-table :data="examPerformanceData" border style="width: 100%">
                        <el-table-column prop="courseObjective" label="课程目标" width="120px">
                        </el-table-column>
                        <el-table-column prop="question" label="题号">
                        </el-table-column>
                        <el-table-column prop="totalValue" label="总分值" width="120px">
                        </el-table-column>
                        <el-table-column prop="averageScore" label="学生平均分">
                        </el-table-column>
                        <el-table-column prop="completion" label="达成度" width="120px">
                        </el-table-column>
                    </el-table>
                    <div>
                        说明：期末考试共3大题，第一题对应课程目标1，第二题对应课程目标2，第三题对应课程目标3。
                    </div>
                    <div slot="header">
                        <span>四、课程目标达成度</span>
                    </div>
                    <el-table :data="courseAchievementData" border style="width: 100%">
                        <el-table-column prop="courseObjective" label="课程目标" width="120px">
                        </el-table-column>
                        <el-table-column prop="supportLinks" label="支撑环节">
                        </el-table-column>
                        <el-table-column prop="completion" label="达成度" width="120px">
                        </el-table-column>
                    </el-table>
                    <div>
                        说明：课程目标达成度=课堂表现达成度×0.1+课程作业达成度×0.3+期末考试达成度×0.6。
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header">
                        <span>四、总结及改进措施</span>
                    </div>
                    <el-table :data="summaryImprovementData" border style="width: 100%">
                        <el-table-column prop="item" label="项目" width="180">
                        </el-table-column>
                        <el-table-column prop="description" label="描述">
                        </el-table-column>
                    </el-table>

                </el-card>
                <el-card class="box-card">
                    <div slot="header">
                        <span>五、课程目标达成度评价合理性确认</span>
                    </div>
                    <el-table :data="evaluationConfirmationData" border style="width: 100%">
                        <el-table-column prop="role" label="评价责任人" width="100">
                        </el-table-column>
                        <el-table-column label="课程目标达成度评价合理性">
                            <el-table-column prop="fullApproval" label="合理" width="140px">
                            </el-table-column>
                            <el-table-column prop="partialApproval" label="基本合理" width="120px">
                            </el-table-column>
                            <el-table-column prop="noApproval" label="不合理" width="120px">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column :width="100" label="课程质量持续改进措施">
                            <el-table-column prop="fullDisapproval" label="可行" width="120px">
                            </el-table-column>
                            <el-table-column prop="partialDisapproval" label="基本可行" width="120px">
                            </el-table-column>
                            <el-table-column prop="noDisapproval" label="不可行" width="120px">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="签字（章）">
                            <el-table-column prop="fullDisapproval" width="120px">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-main>
        </el-container>
    </el-card>

</template>

<script setup>
import { ref } from 'vue';
import JsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import { evaluationMatrix, evaluationConfirmationData, summaryImprovementData, courseAchievementData, examPerformanceData, classPerformanceData, homeworkPerformanceData, courseBasicInfo, quantitativeAnalysisData, spanMethod } from './dataSET'
</script>

<style scoped>
.diagonal-split-header {
    position: relative;
    height: 60px;
}

.text-part {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagonal-line {
    position: absolute;
    width: 200%;
    top: -48px;
    left: 9px;
    height: 100px;
    background: transparent;
    transform: rotate(-152deg);
    /* transform-origin: 0 0; */
    border-top: 1px solid #807878;
}

.table-container {
    overflow: hidden;
}

.box-card {
    margin-bottom: 20px;
}
</style>
